<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="./lib/elementui-index.js"></script>
    <script src="./lib/axios.min.js"></script>
    <script src="./lib/token.js"></script>
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>

</head>
<body>

<div id="app">
    <el-container>
        <el-main>

            <!-- 添加对话框 -->
            <el-dialog title="订单列表" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="序号" :label-width="formLabelWidth">
                        <el-input v-model="form.id" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" :label-width="formLabelWidth">
                        <el-input v-model="form.phone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" :label-width="formLabelWidth">
                        <el-input v-model="form.status" autocomplete="off"></el-input>
                        <el-form-item label="日期" :label-width="formLabelWidth">
                            <!-- <el-select v-model="form.data" placeholder="请选择时间"> -->
                            <template v-model="form.data" placeholder="请选择时间">
                                <div class="block">
                                    <span class="demonstration"></span>
                                    <el-date-picker
                                        v-model="value1"
                                        type="date"
                                        placeholder="选择日期">
                                    </el-date-picker>
                                </div>

                            </template>

                        </el-form-item>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>


            <!-- 表格 -->
            <el-table :data="tableData">
                <el-table-column prop="ooid" label="合同编号" width="180">
                </el-table-column>
                <el-table-column prop="dtime" label="订货时间" width="180">
                </el-table-column>
                <el-table-column prop="jtime" label="交货时间" width="120">
                </el-table-column>
                <el-table-column prop="orequire" label="产品要求" width="140">
                </el-table-column>
                <el-table-column prop="oamount" label="产品合同总数" width="120">
                </el-table-column>
                <el-table-column prop="ostate" label="订单状态">
                    <template slot-scope="scope">
                        {{ scope.row.ostate | capitalize }}
                    </template>
                </el-table-column>

                <el-table-column label="订单详情">
                    <template slot-scope="scope">
                        <el-button @click="getProduct(scope.row)" type="text">查看</el-button>
                    </template>
                </el-table-column>

                <!-- <el-table-column prop="sonOrders" label="子订单">
                    <template slot-scope="scope">
                        <el-button @click="getSonOrders(scope.row.sonOrders)" type="text">查看</el-button>
                    </template>
                </el-table-column> -->

                <!-- <el-table-column prop="ooo" label="是否禁用">
                    <template slot-scope="scope">
                        <el-switch
                        v-model="scope.row.ooo"
                        active-color="#13ce66"
                        active-value="1"
                        inactive-value="0"
                        @change="changeSwitch(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column> -->
            </el-table>

            <!-- 子订单 -->
            <!-- <el-dialog title="子订单" :visible.sync="dialogTableVisible">
                <el-table :data="sonOrders">
                  <el-table-column property="flower.fname" label="花名" width="150"></el-table-column>
                  <el-table-column property="scount" label="数量" width="100"></el-table-column>
                  <el-table-column property="money" label="金额" width="100"></el-table-column>
                  <el-table-column property="sstatus" label="状态"></el-table-column>
                </el-table>
            </el-dialog> -->


            <!-- 分页 -->
            <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageNum"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
        </el-main>
    </el-container>
    </el-container>


</div>


<script>
    new Vue({
        el: '#app',
        data() {
            return {
                //tableData: Array(20).fill(item),
                dialogFormVisible: false,
                form: {
                    region: '',
                    name: '',
                    date: '',
                    phone: '',
                    total: '',
                    status: '',
                },
                sonOrders:[],
                formLabelWidth: '120px',
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                value1: '',
                value2: '',
                tableData:'',
                pageNum:'',
                pageSize:'',
                total:'',
                dialogTableVisible: false
            }
        },
        methods:{
            getAll(){
                axios.get("http://localhost:8001/production/orders/findAll",{
                    params:{
                        pageNum:this.pageNum,
                        pageSize:this.pageSize
                    }
                })
                .then(res=>{
                    console.log(res)
                    this.tableData = res.data.list
                    this.pageNum = res.data.pageNum
                    this.pageSize = res.data.pageSize
                    this.total = res.data.total
                    
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val
                this.getAll()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum = val
                this.getAll()
            },
            changeSwitch(row){
                axios.delete(`http://localhost:8080/order/delOrder/${row.ooid}/${row.ooo}`)
                .then(res=>{
                    console.log(res)
                    if(res.data === true){
                        this.$message({
                            message:'修改成功',
                            type:"success"
                        })
                    }else{
                        this.$message({
                            message:'修改失败',
                            type:"error"
                        })
                    }
                    this.getAll()
                })
            },
            getProduct(row){
                sessionStorage.ooid = row.ooid
                console.log(row.ooid)
                location.href = "product.html"
            }
        },
        created(){
            this.getAll()
        },       
        filters:{
            capitalize: function (value){
                if(value==="1"){
                    return "已完成"
                }else if(value === "0"){
                    return "未完成"
                }
            }
        },
    })
</script>


</body>
</html>